<!--
 * FCKeditor - The text editor for internet
 * Copyright (C) 2003 Frederico Caldeira Knabben
 *
 * Licensed under the terms of the GNU Lesser General Public License
 * (http://www.opensource.org/licenses/lgpl-license.php)
 *
 * For further information go to http://www.fredck.com/FCKeditor/ 
 * or contact fckeditor@fredck.com.
 *
 * fck_image.html: Image dialog box.
 *
 * Authors:
 *   Frederico Caldeira Knabben (fckeditor@fredck.com)
-->
<HTML>
	<HEAD><TITLE>Image</TITLE>
		<META name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
		<LINK rel="stylesheet" type="text/css" href="../css/fck_dialog.css">
		<SCRIPT language="JavaScript">
// Get browsing configuration
var sBrowseURL = dialogArguments.config.ImageBrowserURL ;
var iBrowseWindowWidth  = dialogArguments.config.ImageBrowserWindowWidth ;
var iBrowseWindowHeight = dialogArguments.config.ImageBrowserWindowHeight ;

// Get upload configuration
var sUploadURL = dialogArguments.config.ImageUploadURL ;
var iUploadWindowWidth  = dialogArguments.config.ImageUploadWindowWidth ;
var iUploadWindowHeight = dialogArguments.config.ImageUploadWindowHeight ;

// Gets the document DOM
var oDOM = dialogArguments.objContent.DOM ;

// Gets the image if there is one selected.
var image ;
var sel = oDOM.selection.createRange();
if (oDOM.selection.type != 'Text') 
{
	if (sel.length == 1) 
	{
		if (sel.item(0).tagName == "IMG") image = sel.item(0);
	}
}

// Gets a copy of the image (for image size purposes
var imageOriginal
if (image != null)
{
	imageOriginal = new Image() ;
	imageOriginal.src = image.src ;
}
else 
	imageOriginal = null ;

// Set the dialog title.
if (image) 
	document.write("<TITLE>Edit Image</TITLE>") ;
else 
	document.write("<TITLE>Insert Image</TITLE>") ;
	
// Get the IMG tag.
function getImageHtml()
{
	return '<IMG' 
				+ attr("src", txtURL.value)
				+ attr("alt", txtAlt.value) 
				+ attr("align", cmbAlign[cmbAlign.selectedIndex].value)
				+ ((txtWidth.value)  ? attr("width" , txtWidth.value)  : "")
				+ ((txtHeight.value) ? attr("height", txtHeight.value) : "")
				+ ((txtVSpace.value) ? attr("vspace", txtVSpace.value) : "")
				+ ((txtHSpace.value) ? attr("hspace", txtHSpace.value) : "")
				+ ((txtBorder.value) ? attr("border", txtBorder.value) : attr("border",0))
				+ '/>' ;
}

// Returns a formatted image attribute. Used by getImageHtml(). 
function attr(name, value) 
{
	if (!value || value == "") return "" ;
	return ' ' + name + '="' + value + '"' ;
}

// Update any image (the selected or preview one)
function updateImage(imgTarget)
{
	imgTarget.src = txtURL.value ;
//	setAttribute(imgTarget, "src"   , txtURL.value) ;		
	setAttribute(imgTarget, "alt"   , txtAlt.value) ;		
	setAttribute(imgTarget, "width" , txtWidth.value) ;		
	setAttribute(imgTarget, "height", txtHeight.value) ;		
	setAttribute(imgTarget, "vspace", txtVSpace.value) ;		
	setAttribute(imgTarget, "hspace", txtHSpace.value) ;		
	setAttribute(imgTarget, "border", txtBorder.value) ;		
	setAttribute(imgTarget, "align" , cmbAlign.options[ cmbAlign.selectedIndex ].value) ;
}

function setAttribute(element, attribute, value)
{
	if (value == null || value == "")
		element.removeAttribute(attribute, 0) ;			// 0 = case insensitive
	else 
		element.setAttribute(attribute, value, 0) ;		// 0 = overwrite
}

// Fired when any field change to update the preview image.
function updatePreview()
{
	updateImage(imgPreview) ;
}

// Fired when the user press the OK button
function ok()
{
	window.returnValue = getImageHtml() ;
	window.close() ;
}

// Fired when the user press the CANCEL button.
function cancel() 
{
	window.returnValue = null ;
	window.close() ;
}

// Fired when the user load the window. It sets the fields with the
// actual values if an image is selected in the editor.
function setDefaults()
{
	if (image == null) return ;

	if (image.getAttribute("src",2)    != null) txtURL.value    = image.getAttribute("src",2) ;
	if (image.getAttribute("alt",2)    != null) txtAlt.value    = image.getAttribute("alt",2) ;
	if (image.getAttribute("width",2)  != null) txtWidth.value  = image.getAttribute("width",2) ;
	if (image.getAttribute("height",2) != null) txtHeight.value = image.getAttribute("height",2) ;
	if (image.getAttribute("vspace",2) != null) txtVSpace.value = image.getAttribute("vspace",2) ;
	if (image.getAttribute("hspace",2) != null) txtHSpace.value = image.getAttribute("hspace",2) ;
	if (image.getAttribute("border",2) != null) txtBorder.value = image.getAttribute("border",2) ;

	if (image.getAttribute("align") != null) 
	{
		for (var i = 0 ; i < cmbAlign.options.length ; i++) 
		{
			if (cmbAlign.options[i].value == image.getAttribute("align")) 
			{
				cmbAlign.options[i].selected = true ;
				break ;
			}
		}
	}

	updatePreview() ;
}

// Fired when the width or height input texts change
function sizeChanged(axe) 
{
	// Verifies if the aspect ration has to be mantained
	if (chkLockRatio.checked)
	{
		if ((axe) == "Width")
		{
			if (txtWidth.value != "") 
			{
				if (! isNaN(txtWidth.value))
					txtHeight.value = Math.round( imageOriginal.height * ( txtWidth.value  / imageOriginal.width ) ) ;
			}
			else
				txtHeight.value = "" ;
		}
		else
			if (txtHeight.value != "")
			{
				if (! isNaN(txtHeight.value))
					txtWidth.value  = Math.round( imageOriginal.width  * ( txtHeight.value / imageOriginal.height ) ) ;
			}
			else
				txtWidth.value = "" ;
	}
	
	updatePreview() ;
}

// Fired when the Lock Ratio checkbox is clicked
function onLockRationClick()
{
	sizeChanged("Width") ;
}

// Fired when the Reset Size button is clicked
function resetSize()
{
	txtWidth.value  = imageOriginal.width ;
	txtHeight.value = imageOriginal.height ;
	updatePreview() ;
}

// Fired when the user click in the "Sent it to the Server" button.
function uploadFile()
{
	var sFile = frmUpload.FCKeditor_File.value ;

	if (sFile == "")
	{
		alert("Please select an image to upload.") ;
		return ;
	}
	
	var sExt = sFile.substr( sFile.lastIndexOf(".") + 1, 3).toUpperCase() ;

	if (sExt == "JPG" || sExt == "GIF" || sExt == "PNG")
	{
		openNewWindow("", "UploadWindow", iUploadWindowWidth, iUploadWindowHeight) ;
		frmUpload.submit() ;
	}
	else
		alert("Invalid image file. Only JPG, GIF and PNG files are allowed.\nOperation canceled.") ;
}

function browserServer()
{
	openNewWindow(sBrowseURL, "BrowseWindow", iBrowseWindowWidth, iBrowseWindowHeight) ;
}

function openNewWindow(sURL, sName, iWidth, iHeight, bResizable, bScrollbars)
{
	var iTop  = (screen.height - iHeight) / 2 ;
	var iLeft = (screen.width  - iWidth) / 2 ;
	
	var sOptions = "toolbar=no" ;
	sOptions += ",width=" + iWidth ; 
	sOptions += ",height=" + iHeight ;
	sOptions += ",resizable="  + (bResizable  ? "yes" : "no") ;
	sOptions += ",scrollbars=" + (bScrollbars ? "yes" : "no") ;
	sOptions += ",left=" + iLeft ;
	sOptions += ",top=" + iTop ;
	
	var oWindow = window.open(sURL, sName, sOptions)
	oWindow.focus();
}

function setImage(sImageURL)
{
	if (image != null)
	{
		image = new Image() ;
		image.src = sImageURL ;
	}
	
	imageOriginal = new Image() ;
	imageOriginal.onload = resetSize ;
	imageOriginal.src = sImageURL ;

	txtURL.value = sImageURL ;
}
		</SCRIPT>
	</HEAD>
	<BODY bottommargin="5" leftmargin="5" topmargin="5" rightmargin="5" onload="setDefaults()">
		<TABLE cellspacing="1" cellpadding="1" border="0" width="100%" class="dlg">
			<TR>
				<TD>
					<TABLE cellspacing="0" cellpadding="0" width="100%" border="0">
						<TR>
							<TD>URL<BR>
								<INPUT style="WIDTH: 100%" type="text" id="txtURL" onblur="updatePreview();">
								<TABLE cellspacing="0" cellpadding="0" width="100%" border="0">
									<TR>
										<FORM id="frmUpload" enctype="multipart/form-data" method="post" target="UploadWindow">
											<TD>Upload<BR>
												<INPUT style="WIDTH: 100%" type="file" name="FCKeditor_File" id="FCKeditor_File">
											</TD>
									</TR>
									<TR>
										<TD align="right">
											<INPUT id="btnUpload" type="button" value="Send it to the Server" onclick="uploadFile();">
										</TD></FORM>
									</TR>
								</TABLE>
							</TD>
							<TD width="10">&nbsp;&nbsp;&nbsp;
							</TD>
							<TD valign="top" width="100">
								<INPUT type="button" style="WIDTH: 100%" value="Ok" onclick="ok();">
								<BR>
								<INPUT type="button" style="WIDTH: 100%" value="Cancel" onclick="cancel();">
								<BR>
								<INPUT type="button" style="WIDTH: 100%" value="Browse Server" onclick="browserServer();">
							</TD>
						</TR>
					</TABLE>
					<HR width="100%" color="#000000" size="2">
				</TD>
			</TR>
			<TR>
				<TD>Alternative Text<BR>
					<INPUT style="WIDTH: 100%" type="text" id="txtAlt" onkeyup="updatePreview();">
				</TD>
			</TR>
			<TR>
				<TD>
					<TABLE cellspacing="0" cellpadding="0" width="100%" border="0">
						<TR>
							<TD width="100">
								<TABLE cellspacing="0" cellpadding="0" border="0">
									<TR>
										<TD>Width&nbsp;</TD>
										<TD>
											<INPUT type="text" size="3" id="txtWidth" onkeyup="sizeChanged('Width');"></TD>
									</TR>
									<TR>
										<TD>Height&nbsp;</TD>
										<TD>
											<INPUT type="text" size="3" id="txtHeight" onkeyup="sizeChanged('Height');"></TD>
									</TR>
								</TABLE>
								<INPUT type="checkbox" class="CheckBox" checked id="chkLockRatio" onclick="onLockRationClick();">
								Lock Ratio
								<BR>
								<INPUT type="button" value="Reset Size" onclick="resetSize();">
								<BR>
								<BR>
								<TABLE cellspacing="0" cellpadding="0" border="0">
									<TR>
										<TD>Border</TD>
										<TD>
											<INPUT type="text" size="2" value="0" id="txtBorder" onkeyup="updatePreview();"></TD>
									</TR>
									<TR>
										<TD>HSpace&nbsp;</TD>
										<TD>
											<INPUT type="text" size="2" id="txtHSpace" onkeyup="updatePreview();"></TD>
									</TR>
									<TR>
										<TD>VSpace&nbsp;</TD>
										<TD>
											<INPUT type="text" size="2" id="txtVSpace" onkeyup="updatePreview();"></TD>
									</TR>
									<TR>
										<TD>Align</TD>
										<TD><SELECT id="cmbAlign" onchange="updatePreview();">
												<OPTION value="" selected></OPTION>
												<OPTION value="left">Left</OPTION>
												<OPTION value="absBottom">Abs Bottom</OPTION>
												<OPTION value="absMiddle">Abs Middle</OPTION>
												<OPTION value="baseline">Baseline</OPTION>
												<OPTION value="bottom">Bottom</OPTION>
												<OPTION value="middle">Middle</OPTION>
												<OPTION value="right">Right</OPTION>
												<OPTION value="textTop">Text Top</OPTION>
												<OPTION value="top">Top</OPTION>
											</SELECT></TD>
									</TR>
								</TABLE>
							</TD>
							<TD>&nbsp;&nbsp;&nbsp;</TD>
							<TD width="100%">
								Preview<BR>
								<DIV style="BORDER-RIGHT: 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; OVERFLOW: scroll; BORDER-LEFT: 1px solid; WIDTH: 100%; PADDING-TOP: 5px; BORDER-BOTTOM: 1px solid; POSITION: static; HEIGHT: 174px; BACKGROUND-COLOR: #ffffff">
									<IMG alt="" src="SourceForgeLogo.jpg" align="left" id="imgPreview">Magnus es, 
									domine, et laudabilis valde: magna virtus tua, et sapientiae tuae non est 
									numerus. et laudare te vult homo, aliqua portio creaturae tuae, et homo 
									circumferens mortalitem suam, circumferens testimonium peccati sui et 
									testimonium, quia superbis resistis: et tamen laudare te vult homo, aliqua 
									portio creaturae tuae.tu excitas, ut laudare te delectet, quia fecisti nos ad 
									te et inquietum est cor nostrum, donec requiescat in te. da mihi, domine, scire 
									et intellegere, utrum sit prius invocare te an laudare te, et scire te prius 
									sit an invocare te. sed quis te invocat nesciens te? aliud enim pro alio potest 
									invocare nesciens. an potius invocaris, ut sciaris? quomodo autem invocabunt, 
									in quem non crediderunt? aut quomodo credent sine praedicante? et laudabunt 
									dominum qui requirunt eum. quaerentes enim inveniunt eum et invenientes 
									laudabunt eum. quaeram te, domine, invocans te, et invocem te credens in te: 
									praedicatus enim es nobis. invocat te, domine, fides mea, quam dedisti mihi, 
									quam inspirasti mihi per humanitatem filii tui, per ministerium praedicatoris 
									tui.</DIV>
							</TD>
						</TR>
					</TABLE>
				</TD>
			</TR>
		</TABLE>
<SCRIPT language="javascript">
<!--
	frmUpload.action = sUploadURL ;
//-->
</SCRIPT>
	</BODY>
</HTML>
